<script setup>
import ComAffix from "@/components/ComAffix.vue";
import {ArrowRight} from "@element-plus/icons-vue";
import {useUserStore} from "@/stores/index.js";

const userStore = useUserStore()
</script>
<template>
  <div class="main">
    <el-affix :offset="0">
      <ComAffix/>
    </el-affix>

    <div class="content-container">
      <!-- 用户信息模块 -->
      <div class="user-info">
        <div class="avatar-container">
          <el-avatar :size="120" :src="userStore.user.avatar"/>
        </div>
        <div class="user-details">
          <div class="name-section">
            <h1 class="nickname">{{ userStore.user.nickname }}</h1>
            <span class="user-id">ID: {{ userStore.user.id }}</span>
          </div>

          <!-- 数据统计 -->
          <div class="stats-grid">
            <div class="stat-label">
              <span>关注</span>
              <span>粉丝</span>
              <span>收藏</span>
              <span>获赞</span>
            </div>
            <div class="stat-value">
              <span>{{ userStore.user.followee }}</span>
              <span>{{ userStore.user.fans }}</span>
              <span>{{ userStore.user.collects }}</span>
              <span>{{ userStore.user.likes }}</span>
            </div>
          </div>

          <!-- 简介 -->
          <div class="bio-section">
            <h3 style="font-size: 15px">个人简介</h3>
            <p class="bio-content">{{ userStore.user.introduced }}</p>
          </div>
        </div>
      </div>

      <!-- 主要内容插槽 -->
      <div class="main-content">
        <slot></slot>
      </div>

      <!-- 右侧固定操作栏 -->
      <div class="action-sidebar">
        <slot name="sidebar">
          <!-- 默认侧边栏内容 -->
          <span><router-link to="/publish">创作者中心</router-link> <el-icon><ArrowRight/></el-icon></span>
          <span><router-link to="/user/post">文章</router-link></span>
          <span><router-link to="/user/like">喜欢</router-link></span>
          <span><router-link to="/user/collect">收藏</router-link></span>
          <span><router-link to="/user/footprint">足迹</router-link></span>
        </slot>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.main {
  background-color: #f6f3f3;
  position: relative;
}
.content-container {
  width: 700px;
  margin-left: 150px;
  padding: 20px;

  .user-info {
    background: linear-gradient(135deg, #90bcd7, #fad9d9);
    border-radius: 12px;
    padding: 30px;
    display: flex;
    gap: 40px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;

    .avatar-container {
      flex-shrink: 0;
    }

    .user-details {
      flex-grow: 1;

      .name-section {
        margin-bottom: 25px;

        .nickname {
          font-size: 28px;
          margin: 0 15px 0 0;
          display: inline-block;
        }

        .user-id {
          color: #666;
          font-size: 14px;
        }
      }

      .stats-grid {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-bottom: 10px;
        .stat-label span{
          color: #909399;
          font-size: 15px;
          margin: 0 15px;
        }

        .stat-value span{
          display: inline-block;
          width: 60px;
          text-align: center;

          font-size: 18px;
          font-weight: 600;
          color: #303133;

        }
      }

      .bio-section {
        h3 {
          color: #303133;
          margin: 0 0 10px 0;
          font-size: 16px;
        }

        .bio-content {
          color: #606266;
          line-height: 1.6;
          margin: 0;
        }
      }
    }
  }
}

.action-sidebar {
  position: fixed;
  right: 90px;
  top: 193px;
  width: 150px;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  padding: 20px;
  border-radius: 12px;
  box-shadow:
    0 4px 20px rgba(0, 0, 0, 0.08),
    0 1px 3px rgba(0, 0, 0, 0.04);
  z-index: 1000;
  transition: all 0.3s ease;
  &:hover {
    box-shadow:
      0 8px 30px rgba(0, 0, 0, 0.12),
      0 2px 6px rgba(0, 0, 0, 0.06);
  }
  span{
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  span:hover{
    background: rgba(127, 214, 245, 0.15); // 更浅的背景色
    box-shadow: inset 0 0 0 2px rgba(127, 214, 245, 0.4); // 边框效果

    color: #1a73e8;
    .el-icon {
      color: #1a73e8;
      transform: translateX(2px); // 图标轻微移动
    }
  }
  a {
    text-decoration: none;
    cursor: pointer;
    color: #494848;
    font-size: 14px;
    padding: 0px 12px;
    border-radius: 8px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
  }

}
</style>
